<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<link rel="stylesheet" href="${aier_css_url}social/user/common/hr.css" />


<div class="wrap-another-side help-center">
					<!-- 我的资料卡 -->
					<div class="block-my-infocard">
						<dl class="clearfix">
							<dt>
								<a href="${aier_url}user/uccomm_userCenter.shtml"> <img src="${get_picturl_url}big/${headimg}">
								</a>
							</dt>

							<dd>
								<a href="${aier_url}user/uccomm_userCenter.shtml" class="nickname">${userInfo.nickname}</a>
							</dd>

						</dl>

						<ul class="float-list clearfix">
							<li><a href="${aier_url}${aier_uri}usermyfollow${aier_suffix}"> <strong>${userInfo.cfollow}</strong> <span>关注</span> </a>
							</li>
							<li class="border"></li>
							<li><a href="${aier_url}${aier_uri}usermyfans${aier_suffix}"> <strong>${userInfo.cfans}</strong> <span>粉丝</span> </a>
							</li>
							<li class="border"></li>
							<li><a href="${aier_url}${aier_uri}uccomm_userCenter${aier_suffix}"> <strong>${userInfo.cfresh}</strong> <span>内容</span> </a>
							</li>
						</ul>
					</div>

					<!-- 最近访客 -->
					<div class="block-latest-visitors">
						<fieldset class="title-fieldset">
							<legend>最近来访</legend>
							<a class="btn btn-more btn-normal-orange" id = "moreVisitor"> <span>更多</span> </a>
						</fieldset>
						<div class="visitors-list">
							<ul class="float-list clearfix" id = "visitor">
							</ul>
						</div>
					</div>

					<!-- 可能感兴趣的人 -->
					<div class="block-friends-recommend">
						<fieldset class="title-fieldset">
							<legend>可能感兴趣的人</legend>
							<a class="btn btn-more btn-normal-orange" id="moreInterest"> <span>换一换</span> </a>
						</fieldset>
						<div class="recommend-list">
							<ul class="float-list clearfix" id = "interest">
							</ul>
						</div>
					</div>
				</div>
				
				<!-- fo -->
				<div id="dialogFollowPeople" title="关注成功！设置备注名吗?" style="display:none;">
					<div class="bz-bar">
						<label>
							<span >设置备注名</span>
							<input type="text" id = "remark">
						</label>
					</div>
					
					<div class="gp-bar">
						<div class="exist" id = "groupRadio">
							
						</div>
						<div class="new">
							<a class="btn-addnew">新增一个分组</a>
							<div class="addnew-bar" style="display:none;">
								<label>
									<input type="text">
								</label>
								<a class="btn-orange-2 btn-confirm-add" id = "confirm">确定</a>
								<a class="btn-confirm-cancel" id = "cancel">取消</a>
							</div>
						</div>
					</div>
				
				</div>
				<!-- unfo -->
				<div id="dialogUnFollowPeople" title="取消关注?" style="display:none;">
					<p>你确定要取消关注<span class="nickname"></span>吗?
					
				</div>
				
				
<script type="text/javascript">
    var vpage = 1;
    var ipage = 1;
    var vpage_count=0;
    var ipage_count=0;
    
    $(document).ready(function() {
        searchFG();
        onloadVisitor();
        onloadInterest();
    });
    
    // 获取分组列表以及每个分组的人数
    function searchFG() {
        var fun=function(data){
               if(data.s==1){
                   var gr = "";
                   if (data.fgList != null && data.fgList.length != 0) {
                       for (var i=0;i<data.fgList.length;i++) {
                            var fg = data.fgList[i];
                            
                            if (fg.fgid != -1) {
                                gr += '<input name="group" type="radio" value = "'+fg.fgid+'">'+fg.name+'</input>';
                            }
                       }
                   }
                   
                   $("#groupRadio").html(gr);
               }
           };
           exeAjax(
                ajaxUrl("${aier_url}${aier_urijs}usermyfollow_searchFollowGroup${aier_suffix}"),
                fun,{
                    
           });
    }
    
    function onloadVisitor() {
        // 获取最近来访
        var fun=function(data){
               if(data.s==1){
                   vpage_count = data.page_count;
                   var c = "";
                   if (data.userList != null && data.userList.length > 0) {
                       for (var i=0;i<data.userList.length;i++) {
	                       c += "<li><a href='${aier_url}user/uccomm_userCenter.shtml?in_uid="+data.userList[i].uid+"' class='avatar'><img src=${get_picturl_url}small/"+data.userList[i].headimg+" alt=''> </a></li>";
	                   }
                   }           
                   
                   var visitor=document.getElementById("visitor");
                   visitor.innerHTML = c;
                               
               }
           };
           exeAjax(
                ajaxUrl("${aier_url}${aier_urijs}lookup_searchVisitor${aier_suffix}"),
                fun,{
                   "page":vpage,
                   "page_size":12
           });
         
    }
    
    
    function onloadInterest() {
         // 获取感兴趣的人
         var fun=function(data){
               if(data.s==1){
                   ipage_count = data.page_count;
                   var c = "";
                   if (null != data.userList) {
                       for (var i=0;i<data.userList.length;i++) {
                   
	                       c += '<li><a href="${aier_url}user/uccomm_userCenter.shtml?in_uid='+data.userList[i].uid+'" class="avatar"><img src=${get_picturl_url}small/'+data.userList[i].headimg+' alt=""><span>'
	                       +data.userList[i].nickname+'</span> </a><a class="btn btn-follow btn-normal-orange" data-uid="'+data.userList[i].uid+'"><em class="icon-1 icon-1-plus"></em> <span>关注</span> </a></li>';
	                   }
	                }
	                
                    $("#interest").html(c);
                    
                    $('.btn-follow').click(function(){
				        var thisBtn = $(this);
				        var fuid = thisBtn.attr('data-uid');
				        var nickname = thisBtn.prev('.avatar').children('span').text();
				        var fun=function(data){
			               if(data.s==1){
			                   // 关注成功，弹出对话框，修改备注和分组
		                       btnFollow(fuid,nickname);				               
			               } else {
			                    $().message("加关注失败，请重新再试");
			               }
			           };
			           exeAjax(
			                ajaxUrl("${aier_url}${aier_urijs}usermyfollow_addFollow${aier_suffix}"),
			                fun,{
			                   "fuid":fuid
			           });
		
		           });
               }
           };
           exeAjax(
                ajaxUrl("${aier_url}${aier_urijs}lookup_searchInterestPeople${aier_suffix}"),
                fun,{
                   "page":ipage,
                   "page_size":3
           });
    }
    
    $("#moreVisitor").click(function() {
        if (vpage_count <= vpage) {
            vpage = 1;
        } else {
            vpage += 1;
        }
        onloadVisitor();
        
    });

    $("#moreInterest").click(function() {
        if (ipage_count <= ipage) {
            ipage = 1;
        } else {
            ipage += 1;
        }
        onloadInterest();
    });
    
    
// 加关注
function btnFollow(fuid,nickname){
	var followDialog = $('#dialogFollowPeople');//关注成功弹出框

	followDialog.dialog({
		modal: true,
		autoOpen : false,
		show : "fade",
	    hide : "fade",
		width : "320",
		height : "240",
		buttons: {
			"确定": function() {
			    var fgid;
	            var group = document.getElementsByName("group");
	            for(var i=0;i<group.length;i++)
	            {
	                if(group[i].checked)
	                   fgid = group[i].value;
	            }
	            var remark = $("#remark").val();
	            if (remark.length > 10) {
	               $().message("备注名太长！");
	               return;
	            }
	            if (!isnull(fgid)) {
	               var fun=function(data){
	               };
	               exeAjax(
	                    ajaxUrl("${aier_url}${aier_urijs}usermyfollow_moveFollowGroup${aier_suffix}"),
	                    fun,{
	                        "fuidStr":fuid,
	                        "fgid":fgid
	               });
	            }
	            if (!isnull(remark)) {
	               var fun=function(data){
                   };
                   exeAjax(
                        ajaxUrl("${aier_url}${aier_urijs}userchumscircle_updateRemark${aier_suffix}"),
                        fun,{
                            "auid":fuid,
                            "remark":remark
                   });
	            }
			    $().message("设置成功！");
	            onloadInterest();
				followDialog.dialog( "close" );
			},"取消": function() {
				followDialog.dialog( "close" );
			}
		}
	});
	followDialog.dialog( "open" );	
}

// 创建分组
$('#dialogFollowPeople .btn-addnew').click(function(){
	$(this).hide();
	inputNewG = $(this).next('.addnew-bar').show();
	
});

$("#confirm").click(function(){
    var newGName = $('.addnew-bar').find('input').val();
    if(newGName) {
        var fun=function(data){
            if (data.s == 1) {
                searchFG();
                $('.btn-addnew').show();
                $('.addnew-bar').hide();
                $('.addnew-bar').find('input').val("");
            } else if (data.s = 10001) {
                $().message("已存在相同名称分组!");
            } else {
                $().message("创建分组失败，请稍后再试!");
            }
        };
        exeAjax(
             ajaxUrl("${aier_url}${aier_urijs}usermyfollow_addFollowGroup${aier_suffix}"),
             fun,{
                 "name":newGName
        });
        
    } else{
        $().message('请输入分组名');
    }

});

$("#cancel").click(function(){
    $('.btn-addnew').show();
    $('.addnew-bar').hide();
    $('.addnew-bar').find('input').val("");
});
    
</script>
